﻿<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Fretboard</title>
		<meta charset="utf-8">
		<script src="localstore.js"></script>
		<style>
			html, body {
				font-family: 'Gidugu', serif;
				background-color:#000;
				color: #fff;	
				font-size: xx-large;
				text-align: center;
			}
			a {
				color: #99f;
				text-decoration: none;
			}
			h1 {
				text-align: center;
				border-bottom: 1px solid #333;
			}
			.ftr {
				text-align: left;
				border-top: 1px solid #333;
			}
			.cntr {
				text-align: left;
				display: inline-block;
			}
			@font-face {
			  font-family: 'Gidugu';
			  font-style: normal;
			  font-weight: 400;
			  src: local('Gidugu'), url(gidugu.woff2) format('woff2');
			  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
			}
		</style>
	</head>
	<body>
		<h1>Fretboard menu</h1>
		<div class='cntr'>
			<ul>
				<li><a href='index.html'>Open RiffShare</a></li>
				<li>Examples:
				<a href='https://surikov.github.io/RiffShareAndroid/app/src/main/assets/fretload.html?riff=1-80-00502004220032200202001020000202502024220232202202021020200204503044230432304203041030400307501074210732107101070010720108301082010810108031093010920109101090310c3020c2020c1020c0320e3020e2020e1020e0320a3020a2020a1020a03210502125021450317501100221013210302104021202214023170211213214133171311230212402143031440317301174011850118401180011022212222142231722119401195011a4021a5021c4021e4021c5021e502190011a0021c0021e0021812118221183211912119221193211a1221a2221a3221c1221c2221c3221e1221e2221e3220842108531095310a5320c5320e532094210a4220c4220e422-001100220100001000110022010010'>clean</a>,
				<a href='https://surikov.github.io/RiffShareAndroid/app/src/main/assets/fretload.html?riff=2-120-035110e4020c4120a411064110741108411094110c3320c2320e3020e202034310333106331062310733107231083310823109331092310a2310a3311354113461133611644116361162611744118441194411c4421e4421c3621c2621e2621e3621736117261183611826119361192610051300433003330433204432045121054310463103631454214462143621a2611a3611a441-000100222210001000010022221000'>distortion</a>,
				<a href='https://surikov.github.io/RiffShareAndroid/app/src/main/assets/fretload.html?riff=0-140-0f501105021250214532165011f5311e55100502045020850217552-0000000000000000000000000000000'>bass</a>
				</li>
				<li><a id='copylink' href="javascript:copyLink();">Copy</a> link into clipboard</li>
				<li>Work area screenshot <!--<a href='javascript:setBgMode(0);'>dark</a> | <a href='javascript:setBgMode(1);'>silver</a> | <a href='javascript:setBgMode(2);'>light</a>-->:</li>
			</ul>
		</div>
		<div>
			<!--<span><svg id="contentSVG" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" style="display2:none; padding: 0px; margin: 0px; width: 600px; height: 400px; background:#111">
					</svg></span>
					-->
			<canvas id='cnvs' style="display:none;"></canvas>
		</div>
		<div id="pngdiv" style='width: 100%;'><img id="rsltimg" /></div>
		<p class="ftr">Return to <a href="fretboard.html">Fretboard</a></p>
		<script>
			console.log('fretfile v1.01');
			var notes = readObjectFromlocalStorage('storeFrets');
			var beats = sureArray(readObjectFromlocalStorage('storeBeats'), []);
			var selchan = sureInList(readTextFromlocalStorage('fretchan'), 1, [0, 1, 2]);
			var tempo = sureInList(readTextFromlocalStorage('frettempo'), 120, [80, 100, 120, 140, 160, 180, 200, 220]);
			//console.log(notes,beats);
			//var storeDrums = readObjectFromlocalStorage('storeDrums');
			//var storeTracks = readObjectFromlocalStorage('storeTracks');
			//var flatstate = readObjectFromlocalStorage('flatstate');
			var bgMode = sureInList(readTextFromlocalStorage('fretbgMode'), 0, [0,1,2]);
			var mltpl = 16;
			var lvlsh = 0.75;
			var hh = 0;
			var ww = 0;
			var bg=modeBackground(bgMode);
			var fg=modeDrumColor(bgMode);
			//var ntColor=modeNoteName(bgMode);
			for(var ss=0;ss<document.styleSheets.length;ss++){
				var stylrSheet=document.styleSheets[ss];
				for(var ru=0;ru<stylrSheet.cssRules.length;ru++){
					var cssRule=stylrSheet.cssRules[ru];
					if(cssRule.selectorText){
						if(cssRule.selectorText.includes('html')){
							cssRule.style.setProperty('background-color',bg,null);
							cssRule.style.setProperty('color',fg,null);
						}
					}
				}
			}
			/*function setBgMode(bg) {
				console.log('setBgMode',bg);
				saveText2localStorage('bgMode', '' + this.tempo);
			}*/
			/*function modeDrumColor() {
				if(bgMode==2){
					return '#333';
				}
				return '#ccc';
			}
			function modeBackground  () {
				if(bgMode==1){
					return '#31424C';
				}
				if(bgMode==2){
					return '#C8D1D2';
				}
				return '#000609';
			};*/
			//console.log(pad0('a',3));
			function createURL(){
				var r='';
				var mx=0;
				r=r+selchan;
				r=r+'-';
				r=r+tempo;
				r=r+'-';
				
				for(var i=0;i<notes.length;i++){
					var o=pad0(notes[i].beat.toString(16), 2)
						+notes[i].string.toString(16)
						+notes[i].fret.toString(16)
						+notes[i].length.toString(16);
					//console.log(o,notes[i]);
					r=r+o;
					if(notes[i].beat>mx){
						mx=notes[i].beat
					}
				}
				r=r+'-';
				for(var i=0;i<=mx;i++){
					var m=0;
					
					if(beats[i]==1){
						m=1;
					}
					if(beats[i]==2){
						m=2;
					}
					if(beats[i]==3){
						m=3;
					}
					r=r+''+m;
					//console.log(i,m);
				}
				return r;
			}
			function copyLink(){
				var r=createURL();
				copyHtmlToClipboard('https://zvoog.app/x/riffshare/fretload.html?riff=' + r);
			}
			function copyHtmlToClipboard(html) {
				console.log(html);
				clipboardDiv.innerHTML = html;
				var focused = document.activeElement;
				clipboardDiv.focus();
				window.getSelection().removeAllRanges();
				var range = document.createRange();
				range.setStartBefore(clipboardDiv.firstChild);
				range.setEndAfter(clipboardDiv.lastChild);
				window.getSelection().addRange(range);
				var ok = false;
				try {
					if (document.execCommand('copy')) {
						ok = true;
					} else {
						alert('Can not copy');
					}
				} catch (err) {
					alert('Error ' + err);
				}
				focused.focus();
			}
			function promptExport() {
				var compiler = new MidiCompiler();
				//var storeDrums=readObjectFromlocalStorage('storeDrums');
				//var storeTracks=readObjectFromlocalStorage('storeTracks');
				compiler.exportMidi(storeDrums, storeTracks);
			}
			function savePicture() {
				console.log('savePicture');
				var contentSVG = document.getElementById('contentSVG');
				contentSVG.width = ww;
				contentSVG.height = hh;
				var svgString = new XMLSerializer().serializeToString(contentSVG);
				var cnvs = document.getElementById("cnvs");
				cnvs.width = ww;
				cnvs.height = hh;
				var ctx = cnvs.getContext("2d");
				//console.log('contentSVG'+contentSVG);
				//ctx.drawImage(contentSVG ,0,0);


				var _self = self.URL || self.webkitURL || self;
				//var img = new Image();
				var img = document.getElementById('rsltimg');
				var svg = new Blob([svgString], {
						type: "image/svg+xml;charset=utf-8"
					});
				var url = _self.createObjectURL(svg);
				img.onload = function () {
					ctx.drawImage(img, 0, 0);
					var png = cnvs.toDataURL("image/png");
					//document.getElementById('pngdiv').innerHTML = '<img  width="100%" src="'+png+'"/>';
					//var rsltimg = document.getElementById('rsltimg');
					//rsltimg.src = png;
					//_self.revokeObjectURL(png);
					//console.log(img);
				};
				img.src = url;

			}
			var ns = "http://www.w3.org/2000/svg";
			function line(svg, x1, y1, x2, y2, color) {
				lineStroke(svg, x1, y1, x2, y2, color, mltpl * 0.8);
			}
			function lineStroke(svg, x1, y1, x2, y2, color, strokeWidth) {
				var line = document.createElementNS(ns, 'line');
				line.setAttribute('x1', x1);
				line.setAttribute('y1', y1);
				line.setAttribute('x2', x2);
				line.setAttribute('y2', y2);
				line.setAttribute('stroke', color);
				line.setAttribute('stroke-width', strokeWidth);
				line.setAttribute('stroke-linecap', 'round');
				svg.appendChild(line);
			}
			function text(svg, x, y, t) {
				var txt = document.createElementNS(ns, 'text');
				txt.setAttributeNS(null, 'x', x - mltpl * 0.3);
				txt.setAttributeNS(null, 'y', y + mltpl * 0.3);
				txt.setAttributeNS(null, 'font-size', mltpl * 0.7);
				txt.setAttributeNS(null, 'fill', ntColor);
				txt.innerHTML = t;
				svg.appendChild(txt);
			}
			function pitchName(pitch) {
				var o = Math.ceil(pitch / 12);
				var n = pitch % 12;
				var t = 'C';
				if (n == 1) {
					t = 'C#';
				}
				if (n == 2) {
					t = 'D';
				}
				if (n == 3) {
					t = 'D#';
				}
				if (n == 4) {
					t = 'E';
				}
				if (n == 5) {
					t = 'F';
				}
				if (n == 6) {
					t = 'F#';
				}
				if (n == 7) {
					t = 'G';
				}
				if (n == 8) {
					t = 'G#';
				}
				if (n == 9) {
					t = 'A';
				}
				if (n == 10) {
					t = 'A#';
				}
				if (n == 11) {
					t = 'B';
				}
				return '' + t;
			}
			function blackKey(pitch) {
				var o = Math.ceil(pitch / 12);
				var n = pitch % 12;
				if (n == 1) {
					return true;
				}
				if (n == 3) {
					return true;
				}
				if (n == 6) {
					return true;
				}
				if (n == 8) {
					return true;
				}
				if (n == 10) {
					return true;
				}
				return false;
			}
			function drawPiece() {
				var svg = document.getElementById('contentSVG');
				var hasDrums = storeDrums.length > 0;
				var minPitch = 12 * 5;
				var maxPitch = 0;
				var maxBeat = 1;
				for (var i = 0; i < storeDrums.length; i++) {
					var b = storeDrums[i].beat;
					//console.log(b,storeDrums[i]);
					if (b > maxBeat) {
						maxBeat = b;
					}
				}
				for (var i = 0; i < storeTracks.length; i++) {
					var b = storeTracks[i].beat + storeTracks[i].length - 1;
					//console.log(b,storeTracks[i]);
					if (b > maxBeat) {
						maxBeat = b;
					}
					var p = storeTracks[i].pitch;
					if (p > maxPitch) {
						maxPitch = p;
					}
					if (p < minPitch) {
						minPitch = p;
					}
				}
				var len = Math.floor(maxBeat / 16) + 1;
				//console.log(hasDrums,len,maxBeat,minPitch,maxPitch);
				ww = len * 16 * mltpl;
				hh = 0;
				if (hasDrums) {
					hh = hh + 8 * mltpl;
				}
				if (maxPitch >= minPitch) {
					hh = hh + (maxPitch - minPitch + 1) * mltpl;
				}
				if (hh > 0) {
					for (var i = 0; i < maxPitch - minPitch + 1; i++) {
						if (!blackKey(maxPitch - i)) {
							lineStroke(svg, 0, (i + 0.5) * mltpl, ww, (i + 0.5) * mltpl, '#222', 0.8 * mltpl);
						}
					}
					for (var i = 16 * mltpl; i < ww; i = i + 16 * mltpl) {
						lineStroke(svg, i, 0, i, hh, '#000', 1);
					}
					for (var i = 1 * mltpl; i < ww; i = i + 1 * mltpl) {
						lineStroke(svg, i, 0, i, hh, '#000', 0.25);
					}
					if (hasDrums) {
						for (var i = 0; i < 8; i++) {
							lineStroke(svg, 0, hh - (8 - i) * mltpl, ww, hh - (8 - i) * mltpl, '#000', 0.25);
						}
						for (var i = 0; i < storeDrums.length; i++) {
							var x1 = storeDrums[i].beat * mltpl + 0.5 * mltpl;
							var y1 = hh - 8 * mltpl + storeDrums[i].drum * mltpl + 0.5 * mltpl;
							line(svg, x1, y1, x1 + 1, y1, '#fff');
						}
					}
					for (var i = 0; i < 8; i++) {
						var o = sureNumeric(flatstate.orders[i], 0, i, 7);
						trackInfo[i].order = o;
					}

					for (var o = 0; o < 8; o++) {
						for (var i = 0; i < storeTracks.length; i++) {
							if (trackInfo[7 - storeTracks[i].track].order == 7 - o) {
								var x1 = storeTracks[i].beat * mltpl + 0.5 * mltpl;
								var y1 = (maxPitch - storeTracks[i].pitch) * mltpl + 0.5 * mltpl;
								var x2 = x1 + 1 + (storeTracks[i].length - 1) * mltpl;
								var y2 = y1 - storeTracks[i].shift * mltpl;
								line(svg, x1, y1, x2, y2, trackInfo[7 - storeTracks[i].track].color);
								text(svg, x1, y1, pitchName(storeTracks[i].pitch));
							}
						}
					}
				}
			}
			function drawNoteLine(context2D, x1, y1, x2, y2, color) {
				drawLine(context2D, x1, y1, x2, y2, color, mltpl * 0.8);
			}
			function drawLine(context2D, x1, y1, x2, y2, color, strokeWidth) {
				context2D.lineCap = "round";
				context2D.lineWidth = strokeWidth;
				context2D.strokeStyle = color;
				context2D.beginPath();
				context2D.moveTo(x1, y1);
				context2D.lineTo(x2, y2);
				context2D.stroke();
			}
			function drawText(context2D, x, y, t) {
				var ntColor='#000';
				if(bgMode==2){
					ntColor='#fff';
				}
				//console.log(bgMode,ntColor);
				context2D.font =   "bold 15px sans-serif";
				//context2D.fillStyle = "#ffffff";
				//context2D.fillText(t, x - 0.25 * mltpl + 1, y + 0.25 * mltpl + 1);
				context2D.fillStyle = ntColor;
				context2D.fillText(t, x - 0.25 * mltpl, y + 0.25 * mltpl+2);
			}
			function drawBTx(context2D, x, y, t) {
				context2D.font =  "bold 11px sans-serif";
				context2D.fillStyle = "rgba(127,127,127,0.75)";
				context2D.fillText(t, x - 0.25 * mltpl , y  );
			}
			function drawNTx(context2D, x, y, t) {
				context2D.font =  "bold 21px sans-serif";
				context2D.fillStyle = "rgba(127	,127,127,0.5)";
				context2D.fillText(t, x - 0.25 * mltpl , y  );
			}
			function drawStrike(context2D, beat,mode) {
				//drawBTx(context2D, (beat+0.5)*mltpl, 6.5*mltpl, ''+mode);
				if(mode){
					if(mode==3){
						drawLine(context2D, (0.2+beat)*mltpl, 6.7*mltpl, (0.8+beat)*mltpl, 6.3*mltpl, fg, 1);
					}else{
						if(mode==2){
							drawLine(context2D, (0.3+beat)*mltpl, 6.3*mltpl, (0.7+beat)*mltpl, 6.7*mltpl, fg, 1);
							drawLine(context2D, (0.3+beat)*mltpl, 6.7*mltpl, (0.7+beat)*mltpl, 6.3*mltpl, fg, 1);
						}else{
							drawLine(context2D, (0.5+beat)*mltpl, 6.3*mltpl, (0.5+beat)*mltpl, 6.7*mltpl, fg, 1);
							drawLine(context2D, (0.5+beat)*mltpl, 6.3*mltpl, (0.3+beat)*mltpl, 6.5*mltpl, fg, 1);
							drawLine(context2D, (0.5+beat)*mltpl, 6.3*mltpl, (0.7+beat)*mltpl, 6.5*mltpl, fg, 1);
							}
					}
				}else{
					drawLine(context2D, (0.5+beat)*mltpl, 6.3*mltpl, (0.5+beat)*mltpl, 6.7*mltpl, fg, 1);
					drawLine(context2D, (0.5+beat)*mltpl, 6.7*mltpl, (0.3+beat)*mltpl, 6.5*mltpl, fg, 1);
					drawLine(context2D, (0.5+beat)*mltpl, 6.7*mltpl, (0.7+beat)*mltpl, 6.5*mltpl, fg, 1);
				}
			}
			 function noteColor(bgMode, fret) {
				if (bgMode == 2) {
					if (fret < 1) {
						return '#000'
					}
					if (fret < 2) {
						return '#222'
					}
					if (fret < 3) {
						return '#444'
					}
					if (fret < 4) {
						return '#666'
					}
					if (fret < 5) {
						return '#777'
					}
					if (fret < 6) {
						return '#888'
					}
					return '#999'
				} else {
					if (fret < 1) {
						return '#fff'
					}
					if (fret < 2) {
						return '#ddd'
					}
					if (fret < 3) {
						return '#bbb'
					}
					if (fret < 4) {
						return '#999'
					}
					if (fret < 5) {
						return '#888'
					}
					if (fret < 6) {
						return '#777'
					}
					return '#666'
				}
			}
			
			 function beatExists(beat) {

				for (var i = 0; i < notes.length; i++) {
					if (notes[i].beat == beat) {
						return true;
					}
				}
				return false;
			};
			function drawCanvas() {
				var cnvs = document.getElementById("cnvs");
				//var hasDrums = storeDrums.length > 0;
				//var minPitch = 12 * 5;
				//var maxPitch = 0;
				var maxBeat = 1;
				for (var i = 0; i < notes.length; i++) {
					var b = notes[i].beat;
					if (b > maxBeat) {
						maxBeat = b;
					}
				}
				/*for (var i = 0; i < storeTracks.length; i++) {
					var b = storeTracks[i].beat + storeTracks[i].length - 1;
					//console.log(b,storeTracks[i]);
					if (b > maxBeat) {
						maxBeat = b;
					}
					//console.log(storeTracks[i].pitch,storeTracks[i].shift);
					var max = Math.max(storeTracks[i].pitch, storeTracks[i].pitch + storeTracks[i].shift);
					var min = Math.min(storeTracks[i].pitch, storeTracks[i].pitch + storeTracks[i].shift);
					if (max > maxPitch) {
						maxPitch = max;
					}
					if (min < minPitch) {
						minPitch = min;
					}
				}*/
				//console.log(maxPitch,minPitch);
				var len = Math.floor(maxBeat / 16) + 1;
				ww = len * 16 * mltpl;
				//hh = 0;
				/*var drumUses = [false, false, false, false, false, false, false, false];
				for (var i = 0; i < storeDrums.length; i++) {
					drumUses[storeDrums[i].drum] = true;
				}
*/
				/*var drCount = 0;
				for (var i = 0; i < 8; i++) {
					if (drumUses[i]) {
						drCount++;
						drumUses[i] = drCount;

					}
				}

				if (drCount) {
					hh = hh + drCount * mltpl;
				}
				if (maxPitch >= minPitch) {
					hh = hh + (maxPitch - minPitch + 1) * mltpl;
				}
*/
				cnvs.width = ww;
				cnvs.height = 8*mltpl;
				var context2D = cnvs.getContext("2d");
				context2D.fillStyle = bg;
				context2D.fillRect(0, 0, ww, 8*mltpl);
				drawLine(context2D,0,  0.5*mltpl, ww,  0.5*mltpl,  fg, 1);
				drawLine(context2D,0,  1.5*mltpl, ww,  1.5*mltpl,  fg, 1);
				drawLine(context2D,0,  2.5*mltpl, ww,  2.5*mltpl,  fg, 2);
				drawLine(context2D,0,  3.5*mltpl, ww,  3.5*mltpl,  fg, 2);
				drawLine(context2D,0,  4.5*mltpl, ww,  4.5*mltpl,  fg, 3);
				drawLine(context2D,0,  5.5*mltpl, ww,  5.5*mltpl,  fg, 3);
				for (var i = 1 * mltpl; i < ww; i = i + 1* mltpl) {
						drawLine(context2D, i, 0, i, 6*mltpl,  fg, 0.2);
					}
				for (var i = 16 * mltpl; i < ww; i = i + 16 * mltpl) {
						drawLine(context2D, i, 0, i, 6*mltpl,  fg, 2);
					}
					var bn=1;
				for (var i = 0; i < ww; i = i + 16 * mltpl) {
						drawNTx(context2D,i+14*mltpl, 7.9 * mltpl,  ''+bn);
						bn++;
					}
				for (var i = 0; i < notes.length; i++) {
					var note=notes[i];
					drawLine(context2D, (note.beat+0.5)*mltpl, (0.5+note.string)*mltpl, (note.length+note.beat-0.5)*mltpl, (0.5+note.string)*mltpl,  noteColor(bgMode, note.fret), 0.95*mltpl);
					drawText(context2D, (note.beat+0.5)*mltpl, (0.5+note.string)*mltpl, ''+note.fret);
					
				}
				for (var i = 0; i < len*16; i++) {
					if(beatExists(i)){
						drawStrike(context2D,i,beats[i]);
						}
				}
				/*if (hh > 0) {
					for (var i = 0; i < maxPitch - minPitch + 1; i++) {
						if (blackKey(maxPitch - i)) {
							drawLine(context2D, 0, (i + 0.5) * mltpl, ww, (i + 0.5) * mltpl, 'rgba(0,0,0,0.15)',  mltpl*0.9);
						}else{
							drawLine(context2D, 0, (i + 0.5) * mltpl, ww, (i + 0.5) * mltpl, 'rgba(255,255,255,0.15)',  mltpl*0.9);
						}
					}
					for (var i = 16 * mltpl; i < ww; i = i + 16 * mltpl) {
						drawLine(context2D, i, 0, i, hh,  bg, 2);
					}
					for (var i = 1 * mltpl; i < ww; i = i + 1 * mltpl) {
						drawLine(context2D, i, 0, i, hh,bg, 0.5);
					}
					
					if (hasDrums) {
						//drawText(context2D, 0.5*mltpl, (0.2+maxPitch - minPitch+1)*mltpl, "test 123");
						for (var i = 0; i < drCount; i++) {
							drawLine(context2D, 0, hh - (drCount - i) * mltpl, ww, hh - (drCount - i) * mltpl, '#666', 0.15);
						}
						for (var i = 1 * mltpl; i < ww; i = i + 1 * mltpl) {
							drawLine(context2D, i, hh - drCount  * mltpl, i, hh, '#666', 0.15);
						}
						
						for (var i = 0; i < storeDrums.length; i++) {
							var x1 = storeDrums[i].beat * mltpl + 0.5 * mltpl;
							var y1 = hh - drCount * mltpl + drumUses[storeDrums[i].drum] * mltpl - 0.5 * mltpl;
							drawNoteLine(context2D, x1, y1, x1 + 1, y1,  fg);
						}
						
						
						var s = maxPitch - minPitch;
						if (s < 0) {
							s = -1.0;
						}
						
						for (var i = 0; i < 8; i++) {
							if (drumUses[i]) {
								drawBTx(context2D, 0.5 * mltpl, (0.75 + s + drumUses[i]) * mltpl, drumInfo[i].title);
							}
						}


					}
					
					for (var i = 0; i < 8; i++) {
						var o = sureNumeric(flatstate.orders[i], 0, i, 7);
						trackInfo[i].order = o;
					}

					for (var o = 0; o < 8; o++) {
						for (var i = 0; i < storeTracks.length; i++) {
							if (trackInfo[7 - storeTracks[i].track].order == 7 - o) {
								var x1 = storeTracks[i].beat * mltpl +0.5*mltpl;
								var y1 = (maxPitch - storeTracks[i].pitch) * mltpl+0.5*mltpl ;
								var x2 = x1 + 1 + (storeTracks[i].length - 1) * mltpl;
								var y2 = y1 - storeTracks[i].shift * mltpl;
								//lvlsh = 0.75;
								drawNoteLine(context2D, x1+(7-o)*lvlsh, y1-(7-o)*lvlsh, x2+(7-o)*lvlsh, y2-(7-o)*lvlsh, trackInfo[7 - storeTracks[i].track].color);
								if(o==7){
									
									drawText(context2D, x1, y1, pitchName(storeTracks[i].pitch));
									
								}
							}
						}
					}
					
					var bn=1;
					for (var i = 0; i < ww; i=i+16*mltpl) {
						drawNTx(context2D,i+14*mltpl, 1.9 * mltpl,  ''+bn);
						bn++;
					}
					for (var i = minPitch; i <= maxPitch; i++) {
						var n=maxPitch+minPitch-i;
						if(!(n%12)){
							drawNTx(context2D, 0.5 * mltpl, (0.75 -minPitch+i) * mltpl, 'C'+(1+n/12));
						}
					}
					
					
				}*/
			}
			function drawImage() {
				var cnvs = document.getElementById("cnvs");
				var rsltimg = document.getElementById('rsltimg');

				//console.log(ww,window.innerWidth);
				var dataURL = cnvs.toDataURL();
				rsltimg.src = dataURL;

				if(ww<window.innerWidth){
					rsltimg.style.width = ww+'px';
				}else{
					rsltimg.style.width = '100%';
				}
			}
			drawCanvas();
			drawImage();
			clipboardDiv = document.createElement('div');
			clipboardDiv.style.fontSize = '12pt'; // Prevent zooming on iOS
			// Reset box model
			clipboardDiv.style.border = '0';
			clipboardDiv.style.padding = '0';
			clipboardDiv.style.margin = '0';
			// Move element out of screen
			clipboardDiv.style.position = 'fixed';
			clipboardDiv.style['right'] = '-9999px';
			clipboardDiv.style.top = (window.pageYOffset || document.documentElement.scrollTop) + 'px';
			// more hiding
			clipboardDiv.setAttribute('readonly', '');
			clipboardDiv.style.opacity = 0;
			clipboardDiv.style.pointerEvents = 'none';
			clipboardDiv.style.zIndex = -1;
			clipboardDiv.setAttribute('tabindex', '0'); // so it can be focused
			clipboardDiv.innerHTML = '';
			document.body.appendChild(clipboardDiv);
		</script>
	</body>
</html>
